<template>
  <div>
    <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
          <li v-for="item in list">{{ item }}</li>
        </ul>
    <foot-guide></foot-guide>
  </div>
</template>
<script>
import HeaderBar from '@/components/HeaderBar.vue'
import footGuide from '@/components/footer.vue'
export default {
  name: 'index',
  components: {
    'header-bar': HeaderBar,
    footGuide
  },
  data () {
    return {
      selected: '排行',
      list: []
    }
  },
  methods: {
    changeSelected (data) {
      this.selected = data
    },
    loadMore () {
      this.loading = true
      setTimeout(() => {
        let last = this.list[this.list.length - 1]
        for (let i = 1; i <= 10; i++) {
          this.list.push(last + i)
        }
        this.loading = false
      }, 2500)
    }
  }
}
</script>
<style>

</style>

